<template>
	<view class="address">
		<view class="main">
			<view class="personName dec">
				<text>收件人:</text> <input class="ipt" data-tye="0"  placeholder="请输入姓名" v-model="obj.name" />
			</view>
			<view class="personName dec">
				<text>电话号码:</text> <input class="ipt" data-tye="0"  placeholder="请输入手机号" v-model="obj.tel" />
			</view>
			<view class="personAddress dec">
				<text>所在地区:</text> 
				<view class="input" @tap="chooseCity">{{region.label}}</view>
			</view>
			<view class="personAddress dec">
				<text>详细地址:</text> <input class="ipt" data-tye="1" placeholder="请输入详细地址" v-model="obj.cityBak" />
			</view>
			<view class="agree dec">
				<text>设置默认地址:</text> 
				<switch color="#354E44" :checked="isDefault" @change="isDefaultChange" />
			</view>
		</view>
		<view class="bot">
			<button class="btnSave" @click="doSave" size="default" type="primary">保存地址</button>
			<button v-if="edit" @click="doDel" size="default" type="warn">删除地址</button>
		</view>
		<mpvue-city-picker
		  :themeColor="themeColor"
		  ref="mpvueCityPicker"
		  :pickerValueDefault="cityPickerValue"
		  @onCancel="onCancel"
		  @onConfirm="onConfirm"
		></mpvue-city-picker>
		
	</view>
</template>

<script>
	import mpvueCityPicker from "@/components/mpvue-citypicker/mpvueCityPicker.vue";
	import {addAdress,editAdress,delAdress} from "../../../utils/adress/index.js"
	export default {
		data() {
			return {
				obj:{
					name:"",
					tel:"",
					cityBak:""
				},
				edit:false,
				isDefault:false,
				cityPickerValue: [0,0,0],
				themeColor: "#007AFF",
				region: { label: "请点击选择地址", value: [], cityCode: "" },
			};
		},
		components:{
			mpvueCityPicker
		},
		onShow() {
			uni.setNavigationBarTitle({
				title:"编辑地址"
			})
		},
		onLoad(options) {
			// let item = uni.getStorageSync("user")
			let item = ""
			uni.getStorage({
			    key: 'user',
			    success: function (res) {
					item = res.data
			    }
			});
			let arr = []
			this.obj.userId = item.id
			if(options.edit == "0"){
				this.edit = true
				console.log(this.$store.state.editAddress)
				// this.obj = this.$store.state.editAddress
				this.obj = uni.getStorageSync("editAddress")
				this.obj.isUse == "1" ? this.isDefault = true : this.isDefault = false,
				arr = this.obj.cityCode.split(",")
				arr.shift()
				arr = arr.map(item => item-0) //隐士转换为Number
				// console.log(arr)
				this.cityPickerValue = arr
				this.region.label = this.obj.cityStr
			}
		},
		methods:{
			doSave(){
				if(this.obj.name == ""){
					uni.showToast({
						title: '请先填写用户名!',
						duration: 1000,
						icon:'none'
					});
				}else if(this.obj.tel == ""){
					uni.showToast({
						title: '请填写手机号!',
						duration: 1000,
						icon:'none'
					});
				}else if(this.obj.cityBak == ""){
					uni.showToast({
						title: '请填写详细地址!',
						duration: 1000,
						icon:'none'
					});
				}else{
					uni.showLoading({
					    title: '创建中...',
						mask:true
					});
					var cityCodeArr = [];
					cityCodeArr[0] = this.region.cityCode;  // [130203]
					for (var i = 0; i < this.region.value.length; i++) {
					  cityCodeArr.push(this.region.value[i]); //[130203,2,1,1]
					}
					this.obj.cityStr = this.region.label
					this.obj.cityCode = cityCodeArr.join()
					this.obj.tag = "家",
					this.obj.isUse = this.isDefault?"1":"0"
					// console.log(this.obj)
					let addressApi = null
					if(this.edit){
						addressApi = editAdress
					}else{
						addressApi = addAdress
					}
					addressApi(this.obj)
					.then(res=>{
						// console.log(res)
						if(res.data.code == "S"){
							uni.hideLoading();
							uni.showToast({
								title: '保存成功！',
								duration: 1000
							});
							setTimeout(()=>{
								uni.redirectTo({
									url:"../address/address"
								})
							},1000)
						}
					})
				}
				
			},
			//删除收货地址
			doDel(){
				uni.showModal({
					content: '确认删除吗?',
					success: (res) => {
						if (res.confirm) {
							uni.showLoading({
							    title: '正在删除...',
								mask:true
							});
							delAdress({id:this.obj.id})
							.then(res=>{
								// console.log(res)
								if(res.data.code == "S"){
									uni.hideLoading();
									uni.showToast({
									    title: '删除成功！',
									    duration: 1000
									});
									setTimeout(()=>{
										uni.navigateTo({
											url: '../address/address'
										});
									},1000)
								}
								
							})
							
						}
					}
				});
				
			},
			//监听用户返回操作,进行表单清除
			// onBackPress(){
			// 	this.obj = {
			// 		name:"",
			// 		tel:"",
			// 		cityBak:""
			// 	}
			// 	uni.redirectTo({
			// 		url:"../address/address"
			// 	})
			// 	return true
			// },
			isDefaultChange(e){
				this.isDefault = e.detail.value;
				// console.log(e)
			},
			onCancel(e) {
			  // console.log(e);
			},
			chooseCity() {
			  this.$refs.mpvueCityPicker.show();
			},
			onConfirm(e) {
			  console.log(e);
			  this.region = e;
			  // 预存 一个 values 
			  this.cityPickerValue = e.value;
			},
		},
		
	}
</script>

<style lang="scss">
body,html,uni-page-body {
	height: 100%!important;
	background-color: #F1ECE7;
}
.address{
	width: 100%;
	height: 100%;
	.main{
		display: flex;
		align-content: space-around;
		flex-wrap: wrap;
		width: 95%;
		// height: 100%;
		margin: 0 auto;
		.agree{
			justify-content: space-between;
		}
		.dec{
			width: 100%;
			display: flex;
			align-items: center;
			margin-top: 100rpx;
			.ipt{
				border-bottom: 1rpx solid rgba(0,0,0,.2);
				flex: 1;
			}
		}
		text{
			width: 230rpx;
			font-size: 32rpx;
			// margin-right: 10rpx;
			font-weight: bold;
		}
	}
	.bot{
		position: fixed;
		bottom: 0;
		width: 100%;
		height: 60px;
		display: flex;
		align-items: center;
		button{
			display: flex;
			justify-content: center;
			align-items: center;
			box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.4);
			width: 40%;
			height: 40px;
			border-radius: 40px;
			color: #fff;
		}
		.btnSave{
			background-color: #354E44;
		}
	}
	
}
</style>
